//imgObj:{bigImg:xxx,smallImg:xxx,span:{title:xxx,h2:xxx,p:xxx}}
//imgObjs = [imgObj,imgObj,imgObj,imgObj,imgObj];
//obj:{imgObjs:imgObjs,container:xxx}
//createLoop(obj);
function createLoop(obj){
	var container = $(obj.container);
	var imgObjs = obj.imgObjs;
//	var imgObjstr = JSON.stringify(imgObjs);
//	var imgObjsJson = JSON.parse(imgObjstr);

	var rightList = obj.rightList;

	var index = 0;
	var previousLi;

	var box = $("<div class='loop_box'></div").css("background-color",imgObjs[index].backgroundColor);
	var content = $("<div class='loop_content'></div>").css("cursor","pointer");
	var bigImg = $("<img src='"+imgObjs[index].bigImg+"'/>");
	var span = $("<span/>");
	var title = $("<a>"+imgObjs[index].span.title+"</a>").
	css("background-color",imgObjs[index].span.titleColor).appendTo(span);
	var h2 = $("<a>"+imgObjs[index].span.h2+"</a>").appendTo(span);
	var p = $("<a>"+imgObjs[index].span.p+"</a>").appendTo(span);
	
	var ul = $("<ul/>");
	for (var i = 0; i < imgObjs.length; i++) {
		var li = $("<li id='"+i+"'></li>");
		if(i==0) {
			li.css({"opacity":"1","transform":"translateY(-10px)","border":"2px solid green"});
			previousLi = li;
		}
		var smallImg = $("<img src='"+imgObjs[i].smallImg+"'/>");
		li.on("mousemove",function(){
			if(previousLi){
				previousLi.css({"opacity":"0.6","transform":"translateY(0px)","border":"1px solid #999999"});
			}
			var ind = this.id;
			box.css("background-color",imgObjs[ind].backgroundColor);
			bigImg.attr("src",imgObjs[ind].bigImg);
			$(this).css({"opacity":"1","transform":"translateY(-10px)","border":"2px solid green"});
			title.html(imgObjs[ind].span.title);
			h2.html(imgObjs[ind].span.h2);
			p.html(imgObjs[ind].span.p);
			previousLi = $(this);
			index = ind;
		});
		li.append(smallImg);
		ul.append(li);
	}
	
	var content_right = $("<div class='content_right'></div>");
	var right_top = $("<div class='right_top'></div>").css("width",(rightList.length*62+(rightList.length-1)*30)+"px");
	var under = $("<span class='under'/>").appendTo(right_top);
	var line_div = $("<div class='line_div'></div>").appendTo(right_top);
	var uls = $("<div class='uls'></div>");
	var previousTitle;
	var previousList;
	for(var i = 0; i < rightList.length; i++){
		var rightTitle = $("<a id='"+i+"'>"+rightList[i].title+"</a>");
		rightTitle.on("mousemove",function(){
			line_div.css("left",(this.id*62+this.id*30)+"px");
			if(previousTitle) previousTitle.css("color","#aaaaaa");
			$(this).css("color","white");
			previousTitle = $(this);
			previousList.css("display","none");
			var ul = $("#list"+this.id);
			ul.css("display","block");
			previousList = ul;
		});
		var list = $("<ul id='list"+i+"'></ul>");
		if(i==0){
			previousTitle = rightTitle;
			previousList = list;
		}
		if(i>0){
			list.css("display","none");
		}
		var lis = rightList[i].lis;
		for(var j = 0; j < lis.length; j++){
			var li = $("<li></li>");
			var icon = $("<i>"+(j+1)+"</i>");
			if(j<3){
				icon.css({"background-color":"#ef9632","border":"1px solid #ef9632",
				"color":"white"});
			} else {
				icon.css({"background-color":"","border":"1px solid #aaaaaa"});
			}
			var span_text = $("<span>"+lis[j].text+"</span>");
			var span_watch = $("<span>"+lis[j].watch+"</span>");
			li.append(icon);
			li.append(span_text);
			li.append(span_watch);
			list.append(li);
		}
		right_top.append(rightTitle);
		uls.append(list);
	}
	content_right.append(right_top);
	content_right.append(uls);
	
	content.append(bigImg);
	content.append(span);
	content.append(ul);
	content.append(content_right);
	box.append(content);
	container.append(box);
	
	var lis = $(".loop_box .loop_content>ul>li");
	setInterval(function(){
		if(previousLi){
			previousLi.css({"opacity":"0.6","transform":"translateY(0px)","border":"1px solid #999999"});
		}
		if(index>=imgObjs.length) index = 0;
		box.css("background-color",imgObjs[index].backgroundColor);
		bigImg.attr("src",imgObjs[index].bigImg);
		title.html(imgObjs[index].span.title);
		h2.html(imgObjs[index].span.h2);
		p.html(imgObjs[index].span.p);
		$(lis[index]).css({"opacity":"1","transform":"translateY(-10px)","border":"2px solid green"});
		previousLi = $(lis[index++]);
	},3000);
}
